<!-- 销售管理 -->
<template>
  <div class="navigation">
    <div class="navigation-content">
      <div class="flex-center">
        <div class="document">
          <div class="document-item" v-for="(item, index) in routeList" :key="index" @click="routeClick(item, index)">
            <img style="width: 54px; height: 52px" :src="item.icon" />
            <div class="document-item-title">{{ item.title }}</div>
            <div class="document-item-subtitle">{{ item.subTitle1 }}</div>
            <div class="document-item-subtitle">{{ item.subTitle2 }}</div>
            <div class="document-item-button">{{ item.button }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
import subMenu from '../../menu/Sidebar/submenu'
import { getAction } from '@/api/manage'
import { ACCOUNT_BOOK } from '@/store/mutation-types'
import Vue from 'vue'
import { handlePermissions, handlePagePermissions, handleOtherPerms } from '@/utils'
export default {
  components: {},
  name: 'shopManageMenu',
  props: {},
  watch: {
    '$store.getters.openAccountValue'(val) {
      this.openAccount = val
      if (val === 3) {
        this.isOpenAccount = true
      } else {
        this.isOpenAccount = false
      }
    },
  },
  data() {
    return {
      path: '/shopManage',
      routeList: [],
      titleList: [],
      dialogVisible: false,
      isOpenAccount: false, // 开账状态
      openAccount: 0, // 开账状态
      printPermissions: false, //打印模板设置权限
      localList: [
        {
          title: '网店商品上下架',
          subTitle1: '商城商品信息编辑',
          subTitle2: '上下架设置',
          icon: require('@/assets/shop/shop_manage.png'),
          button: '去设置',
        },
        {
          title: '网店营销、数据统计',
          subTitle1: '商城网店装修、会员管理',
          subTitle2: '营销活动、数据统计设置',
          icon: require('@/assets/shop/shop_setting.png'),
          button: '设置',
        },
      ],
      mallUrl: '', // 店铺地址
    }
  },
  computed: {
    cashPermissions() {
      return handlePermissions('现金银行统计表')
    },
    titleToImage() {
      return {
        销售订单: require('@/assets/home/xsdd-menu.png'),
        销售出库: require('@/assets/home/xsck-menu.png'),
        销售退货: require('@/assets/home/xsth-menu.png'),
        销售换货: require('@/assets/home/xshh-menu.png'),
        其他出库单: require('@/assets/home/qtckd-menu.png'),
        收款结算单: require('@/assets/home/skjsd-menu.png'),
        应收款管理: require('@/assets/home/yskgl-menu.png'),
      }
    },
  },
  mounted() {
    this.getShopConfig()
    this.printPermissions = handleOtherPerms('打印模板设置')
    this.openAccount = this.$store.getters.openAccountValue
    if (this.openAccount === 3) {
      this.isOpenAccount = true
    } else {
      this.isOpenAccount = false
    }
    let data = this.getMenuData()
    console.log('data', JSON.parse(JSON.stringify(data)))
    let tList = [] //第二层标题
    let rList = {} //第二次路径
    if (data && data.children && data.children.length > 0) {
      //配置数据
      for (let index = 0; index < data.children.length; index++) {
        const element = data.children[index]
        let title = element.meta.title
        tList.push(title)
        let children = element.children || []
        let cList = [] //存放第三层路径
        for (let i = 0; i < children.length; i++) {
          const e = children[i]
          if (!e.hidden) {
            cList.push({
              title: e.meta.title,
              path: e.path,
              icon: e.meta.icon,
            })
          }
        }
        rList[title] = cList
      }
      this.titleList = tList
      // this.routeList = rList
      this.routeList = this.localList
    } else {
      //本地数据
      this.titleList = subMenu.routeMap[this.path].titles
      // this.routeList = subMenu.routeMap[this.path]
      this.routeList = this.localList
    }
  },
  methods: {
    // 获取商城配置信息
    getShopConfig() {
      let accountBook = Vue.ls.get(ACCOUNT_BOOK)
      let accountBookId = accountBook && accountBook.id
      getAction('/xghRequestForm/xghRequestForm/getRequestForm', {
        accountBookId,
      }).then((res) => {
        if (res.success && res.result && res.result.length > 0 && res.result[0].appletCode) {
          this.mallUrl = res.result[0].mallUrl
        }
      })
    },
    getMenuData() {
      let arr = this.$store.state.user.permissionList
      for (let index = 0; index < arr.length; index++) {
        const element = arr[index]
        if (element.path == this.path) {
          return element
        }
      }
    },
    routeClick(item, index) {
      if (index == 0) {
        this.$router.push({
          path: '/shopManage/onlineShopGoods',
        })
      } else if (index == 1) {
        window.open(process.env.VUE_APP_API_STORE_URL)
        // if (this.mallUrl) {
        //   window.open(this.mallUrl)
        // } else {
        //   this.$message.warning('请先配置商城地址')
        // }
      }
    },
  },
}
</script>

<style lang="less" scoped>
.navigation {
  height: 100%;
  padding-bottom: 0.168761rem;

  .navigation-content {
    height: 100%;
    display: flex;
    gap: 16px;

    .flex-center {
      flex: 4;
      padding: 24px;
      // flex: 1;
      // height: 100%;
      background-color: #dbdbdb;
      display: flex;
      justify-content: center;
      align-items: center;

      .document {
        // width: 100%;
        // width: 850px;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 60px 100px; // 调整行列间距

        .document-item {
          cursor: pointer;
          width: 184px;
          height: 237px;
          background: white;
          border-radius: 8px;
          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); // 添加投影
          font-size: 15px;
          color: #333;
          transition: all 0.2s;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;

          &:hover {
            transform: translateY(-4px);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
          }

          .document-item-title {
            margin-top: 18px;
            margin-bottom: 4px;
            font-family: PingFang SC, PingFang SC;
            font-weight: bold;
            font-size: 14px;
            color: #000000;
            line-height: 20px;
          }
          .document-item-subtitle {
            font-family: PingFangSC-Regular, PingFangSC-Regular;
            font-weight: normal;
            font-size: 10px;
            color: #666666;
            line-height: 15px;
          }
          .document-item-button {
            margin-top: 25px;
            width: 113px;
            height: 34px;
            line-height: 34px;
            background: #1a93fa;
            border-radius: 30px 30px 30px 30px;
            font-family: PingFang SC, PingFang SC;
            font-weight: bold;
            font-size: 12px;
            color: #ffffff;
            text-align: center;
          }
        }
      }
    }

    /* 右侧统计列表区域 */
    .query_statistics {
      flex: 1;
      background: white;
      border-radius: 10px 10px 0px 0px;
      min-width: 250px; // 右侧区域的最小宽度

      .query_statistics_title {
        height: 56px;
        background: #1890ff !important;
        border-radius: 10px 10px 0 0;
        font-size: 16px;
        font-weight: 600;
        color: white;
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .query_statistics_content {
        margin-top: 40px;
        padding: 0 20px 0 30px;

        .query_statistics_content_item {
          cursor: pointer;
          height: 36px;
          font-size: 15px;
          color: #666;
          margin-bottom: 0;
          transition: all 0.2s;
          display: flex;
          align-items: center;

          &:hover {
            color: #1890ff;
            transform: translateX(4px);
          }

          .yuan {
            width: 10px;
            height: 10px;
            background: linear-gradient(180deg, #3ea1ff 0%, #005eb7 100%);
            border-radius: 50%;
            margin-right: 10px;
          }
        }

        /* 分割线样式 */
        .ant-divider {
          margin: 20px 0;
          background: #e8e8e8;
        }
      }
    }
  }
}
</style>
